<template>
    <div class="content">
      <div class="tabInfo">

        <div class="search">
          <!-- 搜索按钮操作 -->
           <div class="left">
            <SearchForm :formObj="formObj" :formData="formInline"></SearchForm>
           </div>
          <div class="btn">
            <el-button type="primary"  :icon="Plus" @click="Import">新增</el-button>
            <el-button type="info" plain :icon="Upload" @click="Import">导入</el-button>
            <el-button type="info" plain :icon="Download" @click="Export">导出</el-button>
          </div>
        </div>

        <div class="tabTable">
          <TabTable ref="tableDataRef" :isShowBtn="true" :tableData="tableData" :pagination="pagination"
            @handleInfo="handleInfo" @handleGetApplication="handleGetApplication" @sizeChange="sizeChange"
            @currentChange="currentChange">
          </TabTable>
        </div>
  
      </div>
    </div>
  </template>
  <script setup>

  import TabTable from "../components/tabTable.vue";
  import SearchForm from "@/components/searchForm/index.vue";
  import { pageList } from '@/api/employeeRelations/Archive'
  import {
    searchDepyList,
  } from "@/api/recruitment/jobApplication/index.js";
  import {
    ref,
    reactive,
    onMounted,
    onBeforeUnmount,
    getCurrentInstance,
    onUnmounted,
  } from "vue";
  import { getCommonTableHeight } from "@/utils/commonTableHeight.js";
  import { useRouter } from "vue-router";
  import { Upload, Download, Plus } from '@element-plus/icons-vue'
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const buIdOptions = reactive([]);
  const formObj = reactive({
    item: [
       {
        input: true,
        label: "",
        prop: "buid",
        placeholder: "请输评估项目",
        disabled: false,
      },
      {
        input: true,
        label: "",
        prop: "personName",
        placeholder: "请输入用工风险点",
        disabled: false,
      },
      {
        input: true,
        label: "",
        prop: "workNo",
        placeholder: "请输入风险等级",
        disabled: false,
      },
    ],
    btn: [
      {
        type: "primary",
        name: "搜索",
        className: "el-button-primary",
        clickFun: () => {
          handleQuery();
        },
      },
      {
        type: "primary",
        name: "重置",
        className: "el-button-primary",
        clickFun: () => {
          resetTabState();
        },
      },
    ],
  });
  const formInline = reactive({
    pageNum: 1,
    pageSize: 10,
    jobName: '',
    personName: '',
    workNo: "",
    // phase: 0,
  });
  
  const Import = () => {
  
  }
  const Export = () => {
  
}
  const resetTabState = () => {
    // 重置表单字段
    Object.keys(formInline).forEach(key => {
      if (key === 'buid') {
        // 确保 buid 正确重置
        formInline[key] = null; // 或者根据实际情况设置为空字符串或其他默认值
      } else {
        formInline[key] = '';
      }
    });
    // 重置分页
    formInline.pageNum = 1;
    formInline.pageSize = 10;
    // 重新查询
    getJobList();
  };
  
  const tableData = ref([]);
  const pagination = reactive({
    total: 10,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  });
  
  // const total = ref(0);
  
  const multipleSelection = ref([]);
  const tabHeight = ref(0);
  
  // 页面高度
  const updateViewportHeight = () => {
    tabHeight.value = getCommonTableHeight();
  };
  onMounted(() => {
    getDemandDetailsList();
    getJobList();
  });
  
  onBeforeUnmount(() => {
    window.removeEventListener("resize", updateViewportHeight); // 移除监听
  });
  
  const getJobList = () => {
    console.log('formInline',formInline);
    
    pageList(formInline).then((res) => {
      console.log('res', res);
  
      if (res.data.records && res.data.records.length > 0) {
        tableData.value = res.data.records;
  
        pagination.total = res.data.total;
      } else {
        tableData.value = [];
      }
    });
  };
  const handleQuery = () => {
    getJobList();
  };
  const handleRefresh = () => {
    proxy.$refs["searchFormRef"].resetFields();
    getJobList();
  };
  const getDemandDetailsList = async () => {
    // 搜索部门
    const { data } = await searchDepyList();
  
    if (data.length > 0) {
      data.map((item) => {
        let label = item.deptName;
        let value = item.deptId;
        buIdOptions.push({
          label,
          value,
        });
      });
    }
  };
  
  const sizeChange = (size) => {
    formInline.pageNum = pagination.page;
    formInline.pageSize = size.limit;
    pagination.page = size.page;
    getJobList();
  };
  const currentChange = (page) => {
    formInline.pageNum = page.page;
    formInline.pageSize = pagination.limit;
    pagination.page = page.page;
    getJobList();
  };
  // 查看
  const handleInfo = (row) => {
    router.push({
      name: "archivesView",
      query: {
        id: row.id,
        status:row.employeeStatus
      },
    });
  };
  // 编辑
  const handleGetApplication = (row) => {
    router.push({
      name: "archivesEdit",
      query: {
        id: row.id,
        status:row.employeeStatus
      },
    });
  };
  </script>
  <style lang="scss" scoped>
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
  }
  
  .btn {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    margin-right: 10px;
  }
  </style>